<template>
  <div class="shop">

    <el-button size="small"
      type="primary"
      @click='exportIncomeData'>导出数据</el-button>
    
    <el-select style="width:130px;" size='small'
          v-model="form.ordertype"
          filterable
          class="select"
          placeholder="订单类型"
          >
          <el-option v-for="item in ordertypeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"></el-option>
        </el-select>

        <el-select style="width:130px;" size='small'
          v-model="form.orderstatus"
          filterable
          class="select-right"
          placeholder="对账状态"
          >
          <el-option v-for="item in statusList"
            :key="item.id"
            :label="item.name"
            :value="item.id"></el-option>
        </el-select>

    <el-date-picker v-model="form.start_time"
      type="date"
      style="width:142px"
      size='small'
      value-format="yyyy-MM-dd"
      placeholder="选择开始时间">
    </el-date-picker> ~ <el-date-picker v-model="form.end_time"
      type="date"
      style="width:142px"
      value-format="yyyy-MM-dd"
      size='small'
      placeholder="选择结束时间"></el-date-picker>

    <!--搜索-->
    <div class="search">
      <el-input class="input"
        size='small'
        v-model="form.keywords"
        placeholder="输入小店名称搜索"
        clearable></el-input>
      <el-button type="primary"
        size='small'
        @click="searchIncome">搜索</el-button>
    </div>

    <el-table :data="tableData"
      style="width:100%"
      max-height="600"
      class="incomtable"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label='订单ID' width='160'
        prop='ID'></el-table-column>
      <el-table-column label='订单类型'>
        <template slot-scope="scope">
          <p v-if='scope.row.status==0'>门店订单</p>
          <p v-if='scope.row.status==1'>淘客订单</p>
        </template>
      </el-table-column>
      <el-table-column label='所属小店' width='140'
        prop='shop'></el-table-column>
      <el-table-column label='订单编号' prop='ordernumber' width='160'></el-table-column>
      <el-table-column label='订单金额（元）' width='120'>
        <template slot-scope="scope">
          ¥ {{scope.row.income}}
        </template>
      </el-table-column>
      <el-table-column label='实际收益'>
        <template slot-scope="scope">
          ¥ {{scope.row.getincome}}
        </template>
      </el-table-column>

      <el-table-column label='对账状态'
        width='220'>
        <template slot-scope="scope">
          <p v-if='scope.row.type == 1'>已对账 </p>
          <p v-if='scope.row.type == 2'>未对账 </p>
        </template>
      </el-table-column>
      <el-table-column label='订单创建时间' prop='time' width='120'> 
      </el-table-column>
      <el-table-column label='操作'
        fixed='right'>
        <template slot-scope="scope">
          <el-button size='mini'
            type='danager'
            v-if='scope.row.type == 2'
            @click="openPlatformDetail(scope.row.id,'2')">详情</el-button>
            <el-button size='mini'
            type='danager'
            v-if='scope.row.type == 1'
            @click="openPlatformDetail(scope.row.id,'1')">对账</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-col :span="24">
      <div class="pagination">

        <el-pagination background
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="form.size"
          layout="total, prev, pager, next, jumper"
          :total="total"></el-pagination>
      </div>
    </el-col>
   


    <jdialog
      title="小店收入详情（线下）"
      :visible.sync="isShowIncomeDetail"
      width="800px">
     <incomeline-detail :visible="isShowIncomeDetail" :currentId="currentId" :type='type' @close="isShowIncomeDetail = false" @func="cancelShowRecordDetail"></incomeline-detail> 
    </jdialog>  
  </div>
</template>

<script>
import incomelineDetail from './income_inlinedetail'
export default {
  components: {
   incomelineDetail
  },
  data () {
    return {
      isShowIncomeDetail:false,
      currentId:'',
      type:0,
      form: {
        page: 1,
        size: 10,
        status: 0,
        start_time: '',
        end_time: '',
        keywords: '',
        ordertype:0,
        orderstatus:0
      },
      total: 0,
      tableData: [{ 'ID':'001002003','time': '2019-5-20/16:00', 'status': '0', 'incomNum': 'PIG20190704175652348802', 'shop': '星巴克（滨江店）', 'income': '9.9', 'getincome': '9.8', 'type': '1', 'ordernumber': '20190704175652768228' }, { 'ID':'001002003','time': '2019-5-20/16:00', 'status': '1', 'incomNum': 'PIG20190704175652348802', 'shop': '星巴克（滨江店）', 'income': '9.9', 'getincome': '9.8', 'type': '2', 'ordernumber': '20190704175652768228' }],
      ordertypeList:[{'id':0,'name':'全部'},{'id':1,'name':'门店订单'},{'id':2,'name':'淘客订单'}],
      statusList:[{'id':0,'name':'全部'},{'id':1,'name':'已对账'},{'id':2,'name':'未对账'}]
    }
  },
  mounted () {

  },
  methods: {
    changeStatus (day) {
      console.log(day)
      this.form.status = day
    },
    exportIncomeData () {
      console.log('导出数据')
    },
    searchIncome () {

    },
    pageChange (page) {
      this.form.page = page
    },

    openPlatformDetail (id,type) {
      console.log(id)
      this.currentId = id;
      this.isShowIncomeDetail = true;

      //2详情 1对账
      this.type =  Number(type)
    },
     cancelShowRecordDetail(){
      this.isShowIncomeDetail = false;
    },
    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
  },



}
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  .search {
    float: right;
    .input {
      width: 160px;
      margin-right: 2px;
    }
  }
  .select{
    margin:  0px 12px;
  }
  .select-right{
    margin-right: 12px;
  }
  .pagination {
    float: right;
    margin-top: 15px;
  }
  .incomtable{
    margin-top: 20px;
  }
}
</style>